<template>
  <div class="my">
    <div class="my-top">
      <!-- 用户头像 -->
      <div class="userImg">
        <van-image
          v-if="!useStore.userInfo.header_img"
          round
          width="18vw"
          height="18vw"
          src="https://yt3.ggpht.com/a/AATXAJzZalKYsl72pg0RF8GKg8NvSKu8fuWYt_SptA=s900-c-k-c0xffffffff-no-rj-mo"
        />
        <!-- <van-uploader  v-model="fileList" reupload max-count="2" :after-read="uploadImg" /> -->
      </div>
      <!-- 用户信息 -->
      <div class="userInfo">
        <template v-if="!useStore.userInfo.token">
          <router-link class="login-register" to="/login">登录/注册</router-link>
        </template>
        <div class="username" v-else>
          <h3>{{useStore.userInfo.name}}</h3>
          <ul class="attention">
            <li class="first">关注<span>0</span></li>
            <li class="second">粉丝<span>0</span></li>
            <li>好友<span>0</span></li>
          </ul>
        </div>
      </div>
      <div class="my-top-fun">
        <van-icon name="service" size="7vw"  color="black" /> 
        <van-icon name="setting-o" size="7vw"  color="black"  />
      </div>
      <!-- 会员 -->
      <div class="member">
        <a href="#"><h1>会员中心</h1><span>188积分兑得宝无香手帕纸12包</span>
          <van-button round type="warning" size="mini" class="see-btn">去看看</van-button>
        </a>
      </div>
      <!-- 收藏 -->
      <div class="my-top-bottom">
        <ul>
          <li>
            <van-icon name="star-o" size="8vw" />
            <span>收藏</span>
          </li>
          <li>
            <van-icon name="shop-collect-o" size="8vw" />
            <span>关注店铺</span>
          </li>
          <li>
            <van-icon name="underway-o" size="8vw" />
            <span>足迹</span>
          </li>
          <li @click="topUp">
            <van-icon name="paid" size="8vw" />
            <span v-if="useStore.userInfo.money" class="money">零钱￥{{useStore.userInfo.money}}<i>.00</i></span>
            <span v-else class="money">请登录</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="my-main">
      <!-- 我的订单 -->
      <div class="my-order">
        <div class="text" @click="toOrder">
          <a href="#"><h3>我的订单</h3><span>全部<van-icon name="arrow" /></span></a>
        </div>
        <ul class="order-details">
          <li><a href="#">
            <van-icon name="pending-payment" size="8vw" />
            <span>待付款</span>
          </a></li>
          <li><a href="#">
            <van-icon name="send-gift-o" size="8vw" />
            <span>待发货</span>
          </a></li>
          <li><a href="#">
            <van-icon name="logistics" size="8vw" />
            <span>待收货</span>
          </a></li>
          <li><a href="#">
            <van-icon name="chat-o" size="8vw" />
            <span>待评价</span>
          </a></li>
          <li><a href="#">
            <van-icon name="after-sale" size="8vw" />
            <span>退款/售后</span>
          </a></li>
        </ul>
      </div>
      <!-- 我的权益 -->
      <div class="my-order my-equity">
        <div class="text">
          <a href="#"><h3>我的权益</h3><span>全部<van-icon name="arrow" /></span></a>
        </div>
        <ul class="order-details">
          <li><a href="#">
            <div class="equity">
              <span>￥</span><h3>3</h3>
            </div>
            <span>红包</span>
          </a></li>
          <li><a href="#">
            <div class="equity">
              <h3>15</h3><span>张</span>
            </div>
            <span>优惠券</span>
          </a></li>
          <li><a href="#">
            <div class="equity">
              <span>开卡享￥</span><h3>50</h3>
            </div>
            <span>淘宝省钱卡</span>
          </a></li>
          <li><a href="#">
            <div class="equity">
              <span>￥</span><h3>0</h3>
            </div>
            <span>淘金币可抵</span>
          </a></li>
        </ul>
      </div>

      <van-cell  is-link @click="toAddress">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="custom-title">地址管理</span>
        </template>
      </van-cell>

      <van-button type="danger" @click="logOut" round block>退出登录</van-button>

    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import userStore from '@/stores/user';
import { useRouter } from 'vue-router';
import {balanceApi,updateUserInfoApi} from '@/server'
const useStore=userStore()
const router=useRouter()
// 地址管理
const toAddress=()=>{
  router.push('/AddressList')
}
// console.log(useStore.userInfo);
// const fileList = ref([
//       { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
//     ]);
// console.log(fileList.value);
// const uploadImg=(file)=>{
//   fileList.value.url=file.objectUrl
//   updateUserInfo()
// }
// const updateUserInfo=async()=>{
//   let res=await updateUserInfoApi(useStore.userInfo.id,{header_img:fileList.value[0].url})
//   console.log(res);
// }
// const balance=ref()
// 充值
const topUp=()=>{
  router.push('/Recharge')
}
// console.log(useStore.userInfo.money);
// 查看余额
// const balanceData=async ()=>{
//   let res=await balanceApi()
//   balance.value=res.data.result.money
// }
// balanceData()
// 退出登录
const logOut=()=>{
  useStore.LOGIN_OUT()
  router.push('/Login')
}
// 我的订单
const toOrder=()=>{
  router.push('/MyOrder')
}
</script>

<style lang='scss'>
.my{
  width: 100vw;
  .my-top{
    position: relative;
    height: 56vw;
    background-color: #fdf1e1;
    .userImg{
      position: absolute;
      top: 4vw;
      left: 4vw;
      width: 18vw;
      height: 18vw;
    }
    .userInfo{
      position: absolute;
      top: 4vw;
      left: 25.0667vw;
      width: 50vw;
      height: 20vw;
      // background-color: purple;
      .login-register{
        font-size: 8vw;
        line-height: 20vw;
      }
      .username{
        position: absolute;
        top: 1vw;
        left: 1.3333vw;
        font-size: 7vw;
        .attention{
          margin-top: 2.6667vw;
          display: flex;
          justify-content: space-between;
          width: 45vw;
          height: 5.3333vw;
          li{
            line-height: 5.3333vw;
            font-size: 4vw;
            span{
              display: inline-block;
              margin-left: 1vw;
            }
          }
          .second{
            text-align: center;
            width: 16vw;
            border-left: 1px solid gray;;
            border-right: 1px solid gray;
          }
        }
      }
    }
    .my-top-fun{
      position: absolute;
      top: 5vw;
      right: 0;
      display: flex;
      justify-content: space-around;
      height: 8.3333vw;
      width: 26.6667vw;
    }
    .member{
      position: absolute;
      top: 25.5vw;
      left: 3vw;
      width: 93.3333vw;
      height: 10.6667vw;
      border-radius: 5vw 5vw 0 0;
      background-color: #f6cdaf;
      a{
        position: relative;
        display: block;
        margin: 0 3vw;
        h1{
          display: inline-block;
          font-size: 4.5vw;
          color: #de5a3d;
          line-height: 10.6667vw;
          font-weight: bold;
        }
        span{
          margin-left: 2vw;
          display: inline-block;
          color: #de5a3d;
          font-size: 3.2vw;
        }
        .see-btn{
          position: absolute;
          top: 2.5vw;
          right: 1.5vw;
        }
      }
    }
    .my-top-bottom {
      position: absolute;
      bottom: 0;
      width: 100vw;
      height: 19.7333vw;
      border-radius: 5vw 5vw 0 0;
      background-color: #fbf9f6;
      ul{
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100vw;
        height: 19.7333vw;
        li{
          text-align: center;
          // width: 18.6667vw;
          height: 13.3333vw;
          // background-color: pink;
          .van-icon{
            display: block;
          }
          span{
            margin-top: 1.3vw;
            display: block;
            font-size: 3.2vw;
          }
          .money{
            width: 19vw;
            overflow:hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
  .my-main{
    width: 100vw;
    height: 60vh;
    background-color: #f2f2f2;
    .my-order{
      padding-top: 2.6667vw;
      margin: 0 auto;
      width: 96vw;
      height: 29.3333vw;
      background-color: #fff;
      border-radius: 5vw 5vw;
      box-sizing: border-box;
      .text{
        margin: 0 3vw 2.6667vw;
        height: 5.3333vw;
        a{
          display: flex;
          justify-content: space-between;
          align-items: center;
          h3{
            color: black;
            font-weight: bold;
          }
          span{
            color: #b0b0b0;
            font-size: 3.2vw;
          }
        }
      }
      .order-details{
        height: 18.6667vw;
        display: flex;
        justify-content: space-around;
        li{
          a{
            display: block;
            height: 18.6667vw;
            color: black;
            text-align: center;
            .van-icon{
              display: block;
            }
            span{
              margin-top: 1.5vw;
              display: block;
              font-size: 3.2vw;
            }
          }
        }
      }
    }
    .my-equity{
      margin-top: 2.6667vw;
      height: 26.6667vw;
      .order-details{
        height: 16vw;
        li{
          a{
            height: 16vw;
            .equity{
              display: flex;
              align-items: center;
              justify-content: center;
              height: 8vw;
              span{
                display: inline-block;
                font-size: 3vw;
              }
              h3{
                font-size: 7vw;
              }
            }
          }
        }
      }
    }
    .van-cell{
      margin: 2.6667vw auto 0;
      width: 96vw;
      border-radius: 2.6667vw;
    }
    .van-button{
      margin: 2.6667vw auto 0;
      width: 96vw;
    }
  }
}
</style>
